<template>
  <el-row :gutter="10" style="height:100%">
    <el-col :span="8" style="height:100%">
      <div style="display: flex;flex-direction: column;height: 100%;">
        <dv-border-box-10 :color="['#025d6d']" id="tableWrapper">
          <el-table :data="tableData"
            style="width: 100%;overflow-y: auto;height: calc(100% - 10px);"
            :header-row-style="{fontSize:'17px',color:'white'}"
            :row-style="{fontSize:'15px',color:'white'}" border>
            <el-table-column prop="index" label="序号" align="center" width="70px">
              <template slot-scope="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="compName" label="企业名称" align="center" min-width="180px">
            </el-table-column>
            <el-table-column prop="score6" label="得分" align="center" min-width="120px">
            </el-table-column>

          </el-table>

        </dv-border-box-10>
      </div>
    </el-col>
    <el-col :span="16" style="height:100%;">
      <div style="flex: 1 ;display: flex;flex-direction: column;height: 100%;">
        <!-- <dv-charts :option="option1" style="height: 400px;" />
            <dv-charts :option="option1" style="height: 400px;" /> -->
        <div style="flex: 1;">
          <dv-border-box-12 :color="['#025d6d']">
            <div style="height:100%;" ref="echarts1"> </div>
          </dv-border-box-12>

        </div>
        <div style="flex: 1;margin-top: 5px;">

          <dv-border-box-12 :color="['#025d6d']" style="flex: 1;">
            <div style="height: 100%;position: relative;">
              <div style="height:100%;" ref="echarts2"> </div>
              <el-select v-model="zoneName" placeholder="请选择" size="mini"
                style="position: absolute;top: 10px;right: 10px;width: 160px;" multiple
                collapse-tags @change="onZoneChanged">
                <el-option v-for="item in zoneList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>

          </dv-border-box-12>
        </div>

      </div>
    </el-col>

  </el-row>
</template>
<script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/pie1';
import barOption1 from './charts/bar1';
import scoreData from './data/score_data_all';
import { queryCompScoreList } from '@/service/compScore';

import {
  queryCompDangerList,
  updateCompDanger,
  addCompDanger,
  delCompDanger,
  importExcel,
} from '@/service/compDanger';
export default {
  components: {},
  data() {
    return {
      loading: true,
      tableHeight: 550,
      zoneName: ['2#地块'],
      zoneList: [
        { label: '1#地块', value: '1#地块' },
        { label: '2#地块', value: '2#地块' },
        { label: '3#地块', value: '3#地块' },
        { label: '4#地块', value: '4#地块' },
        { label: '5#地块', value: '5#地块' },
        { label: '6#地块', value: '6#地块' },
        { label: '7#地块', value: '7#地块' },
      ],
      tableData: [],
      option1: {},
    };
  },
  methods: {
    loadPieBar() {
      let count1 = this.tableData.filter((item) => item.lastScore >= 80).length;
      let count2 = this.tableData.filter(
        (item) => item.lastScore >= 60 && item.lastScore < 80
      ).length;
      let count3 = this.tableData.filter(
        (item) => item.lastScore >= 40 && item.lastScore < 60
      ).length;
      let count4 = this.tableData.filter((item) => item.lastScore < 40).length;
      //占比
      const sumValue = this.tableData.length;

      pieOption1.yAxis[0].data = [count1, count2, count3, count4].map(
        (item) => ((item / sumValue) * 100).toFixed(2) + '%'
      );
      pieOption1.series[0].data[0].value = count1;
      pieOption1.series[1].data[0].value = count2;
      pieOption1.series[2].data[0].value = count3;
      pieOption1.series[3].data[0].value = count4;
      this.myChart.setOption(pieOption1);
    },

    initCharts() {
      const container = document.getElementById('container1');
      this.myChart = this.$echarts.init(this.$refs.echarts1);

      this.myChart1 = this.$echarts.init(this.$refs.echarts2);

      window.onresize = function () {
        //自适应大小
        this.myChart.resize();
        this.myChart1.resize();
      };
    },
    onZoneChanged(val) {
      this.zoneName = val;
      this.loadScoreBar();
    },
    loadScoreBar() {
      let barData = this.tableData.filter(
        (item) => this.zoneName.indexOf(item.zoneNo) >= 0
      );
      // console.log('this.tableData', this.tableData);

      barOption1.series[0].data = barData.map((item) => 100);
      barOption1.series[1].data = barData.map((item) => item.lastScore);
      barOption1.series[2].data = barData.map((item) => item.lastScore);

      barOption1.VALUE = barData.map((item) => item.lastScore);
      barOption1.xAxis.data = barData.map((item) => item.companyShort);
      console.log('barData', barOption1);
      this.myChart1.setOption(barOption1);
    },

    clickItem(compny_name) {
      console.log('compny_name', compny_name);
    },
    async loadTable() {
      const res = await queryCompScoreList({
        page_no: 0,
        page_size: 100,
      });
      if (res.dataList) {
        this.tableData = res.dataList;
        this.loadScoreBar();
        this.loadPieBar();
      }
    },
  },

  mounted() {
    const vm = this;

    // setTimeout(() => {
    //   vm.loadCharts();
    // }, 500);
    this.initCharts();
    this.$nextTick().then(
      function () {
        this.tableHeight =
          document.getElementById('tableWrapper').clientHeight - 20;
        console.log('this.tableHeight', this.tableHeight);
      }.bind(this)
    );
    this.loadTable();
  },
};
</script>
<style scoped>
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td,
::v-deep .el-table th.el-table__cell {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table .cell {
  padding-left: 1px;
  padding-right: 1px;
}

.user_skills {
  width: 50%;
  margin: auto;
}

.user_skills /deep/ .el-table--fit {
  padding: 20px;
}

.user_skills /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table tr {
  background-color: transparent !important;
}

.user_skills /deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 3px;
}
/deep/ .active_dot_green-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: green;
}

/deep/ .active_dot_red-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}

::v-deep .el-select .el-input__inner {
  background-color: transparent;
  color: white;
}
::v-deep .el-select__tags .el-tag {
  background-color: transparent;
  color: white;
}
</style>